<template>
  <div class="page-layout main">
    <!-- 头部 -->
    <div class="page-header main-content-header" :style="headerStyle">
      <div class="main-content-header-main" :style="contentStyle">
        <!-- 头部左边 -->
        <div class="main-content-header-item">
          <!-- Logo部分 -->
          <div class="main-menu-logo" :style="logoStyle.base">
            <Logo
              :type="['img', 'text']"
              :imgStyle="logoStyle.imgStyle"
              :textStyle="logoStyle.textStyle"
            />
          </div>
          <!-- <svg-icon
            :style="{ color: headerStyle['color'] }"
            @click="() => (trigger = trigger ? false : true)"
            class="main-header-trigger"
            :type="!trigger ? 'fold' : 'unfold'"
          /> -->
        </div>
        <!-- 头部右边 -->
        <div class="main-content-header-right">
          <HeaderRight :headerRightStyle="headerRightStyle" />
        </div>
      </div>
    </div>

    <!-- 下部 -->
    <div class="page-content main-content" :style="contentStyle">
      <!-- 左边部分 -->
      <transition name="menufade">
        <div class="page-side main-menu" v-if="!trigger" :style="menuStyle">
          <!-- 左边菜单部分 -->
          <div
            class="main-menu-list"
            :style="{
              height: 'calc(100vh - 30px - ' + headerStyle['height'] + ')',
            }"
            v-scrollBar
          >
            <Side
              :data="menuTree"
              :option="option"
              @itemClick="itemClick"
              @itemOpenClick="itemOpenClick"
            />
          </div>
        </div>
      </transition>

      <!-- 右边内容 -->
      <div class="right-body" :style="{ width: 'calc(100% - ' + menuStyle.width + ')' }">
        <Breadcrumbs style="height: 30px; margin: 0 1.2rem" />

        <PageBody
          class="page-content-body"
          :style="{
            height: 'calc(100% - 30px)',
          }"
        />
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, watch } from "vue";
import { useRoute } from "vue-router";
import { deepCopy, inArray } from "@/utils/tool";
import { getRouteInfo } from "@/utils/getTopToute";
import { cache } from "@/utils/cache";
import Logo from "@/layouts/public/Logo.vue";
import Side from "@/layouts/public/Side.vue";
import HeaderRight from "@/layouts/public/HeaderRight.vue";
import Breadcrumbs from "@/layouts/public/Breadcrumbs.vue";
import PageBody from "@/layouts/public/PageBody.vue";
import config from "@/config/index";
import { getRoutMenu } from "@/router/menuRoute";
// 读取环境配置
const AppConfig = window.AppConfig;

const route = useRoute();
// 已登录获取最新路由菜单
if (cache(AppConfig.BASE_API_TOKEN_NAME)) {
  // 获取最新路由菜单
  getRoutMenu();
}
// 当前布局配置
const layout = config.loyout["mode3"];
// 获取菜单选中索引
const selectedKey = cache("selectedKey_" + config.MenuCacheName);
// 获取菜单路由
const MenuRouteList = cache(config.MenuCacheName);
// 深度拷贝菜单路由
const new_menuTree = deepCopy(MenuRouteList);

// 获取顶级路由
const getTopRoute = (path) => {
  const menuTreeList = deepCopy(new_menuTree);
  var topMmenu = {};
  for (const key in menuTreeList) {
    if (menuTreeList[key]["path"] == path) {
      topMmenu = menuTreeList[key];
      break;
    }
  }
  return topMmenu;
};

// 获取最顶级路由信息
const getTopRouteInfo = (path) => {
  const routeInfo = getRouteInfo(deepCopy(new_menuTree), path);
  const topRoute = getTopRoute(routeInfo);
  return {
    routeInfo,
    topRoute,
  };
};

const trigger = ref(false);
const menuStyle = ref(
  Object.assign(
    {
      width: "200px",
      color: "#111",
      background: "#fff",
      padding: "10px",
    },
    layout.menuStyle
  )
);
const headerStyle = ref(
  Object.assign(
    {
      background: "#001529",
      color: "#111",
      height: "60px",
      lineHeight: "60px",
    },
    layout.headerStyle
  )
);
const headerRightStyle = ref(
  Object.assign(
    {
      color: "#fff",
    },
    layout.headerRightStyle
  )
);
const contentStyle = ref(
  Object.assign(
    {
      width: "99%",
      margin: "0 auto",
    },
    layout.contentStyle
  )
);
const logoStyle = ref(
  Object.assign(
    {
      // 左侧菜单logo基础配置样式
      base: {
        height: "60px",
        paddingLeft: "20px",
      },
      // 左侧菜单logo部分图片样式
      imgStyle: {
        width: "25px",
        marginRight: "5px",
      },
      // 左侧菜单logo部分文字样式
      textStyle: {
        color: "",
        fontSize: "16px",
      },
    },
    layout.logoStyle
  )
);
const menuTree = ref(new_menuTree);
const option = ref({
  // 展开索引
  selectedKey: selectedKey ? selectedKey : [],
  // 选中索引
  openKeys: [route.path],
  // 栏目高度
  height: layout.height ? layout.height : 40,
  // 间隔px
  interval: layout.interval ? layout.interval : 20,
  // 自定义菜单主题
  theme: {
    // 自定义菜单栏目样式
    menuColumnStyle: Object.assign(
      {
        // 字体颜色 #111
        color: "#111",
        fontSize: "14px",
      },
      layout.menuColumnStyle
    ),
    // 自定义菜单栏目选中时样式
    menuColumnActiveStyle: Object.assign(
      {
        // 背景颜色:#1890ff,#001529,#ffffff
        background: "#1890ff",
        // 字体颜色
        color: "#fff",
      },
      layout.menuColumnActiveStyle
    ),
    // 自定义菜单栏目选中展开下级时样式
    menuColumnActiveOpenStyle: Object.assign(
      {
        // 背景颜色:#1890ff,#001529,#ffffff
        background: "transparent",
        // 字体颜色
        color: "#999",
      },
      layout.menuColumnActiveOpenStyle
    ),
  },
});

// 获取子菜单被选中时的父菜单
const getParentPath = (active_path, topmenu, selected_key) => {
  let parent_path = "";
  for (const key in topmenu) {
    if (
      topmenu[key]["meta"] &&
      topmenu[key]["meta"]["activePath"] &&
      inArray(active_path, topmenu[key]["meta"]["activePath"])
    ) {
      parent_path = topmenu[key]["path"];
    }
    if (topmenu[key]["children"] && topmenu[key]["children"].length > 0) {
      selected_key.push(topmenu[key]["path"]);
      return getParentPath(active_path, topmenu[key]["children"], selected_key);
    }
  }
  return {
    parent_path,
    selected_key,
  };
};

// 选中目标菜单
const ToTargetMenu = (getTopRoute, path) => {
  const parentPath = getParentPath(path, [getTopRoute], []);
  if (parentPath.parent_path) {
    option.value.openKeys = [parentPath.parent_path];
    option.value.selectedKey = parentPath.selected_key;
  } else {
    option.value.openKeys = [path];
  }
};

// 初始化
const initMenu = () => {
  // 获取最顶级路由信息
  const topRouteInfo = getTopRouteInfo(route.path);
  ToTargetMenu(topRouteInfo.topRoute, route.path);
};
initMenu();

watch(
  () => route.path,
  () => {
    initMenu();
  }
);
const itemOpenClick = (selectedKey) => {
  option.value.selectedKey = selectedKey;
  cache("selectedKey_" + config.MenuCacheName, selectedKey, 86400);
};
const itemClick = (item) => {
  option.value.openKeys = [item.path];
};
</script>
<style scoped>
.page-layout {
  box-sizing: border-box;
  display: flex;
  flex: auto;
  min-height: 0;
  flex-direction: column;
}

.page-side {
  box-sizing: border-box;
  height: 100%;
  background: #001529;
  align-items: center;
  justify-content: center;
  color: #fff;
}

/* 隐藏过渡效果 */
.menufade-enter-active,
.menufade-leave-active {
  transition: all 0.2s;
  /* 防止折叠时元素溢出 */
  overflow: hidden;
  box-sizing: border-box;
}

.menufade-enter-from,
.menufade-leave-to {
  width: 0px !important;
  transition: all 0.2s;
  opacity: 0;
}

.page-content {
  box-sizing: border-box;
  transition: all 0.2s;
  display: flex;
  flex: 1;
  margin-top: 10px !important;
  min-height: 0;
  background: #f0f2f5;
  overflow: hidden;
}

.page-header {
  box-sizing: border-box;
  height: 20px;
  flex: 0 0 auto;
  background: #fff;
  color: #000000d9;
  line-height: 20px;
  text-align: center;
}

.right-body {
  flex: 1;
}

.main {
  height: 100vh;
  background: #f0f2f5;
  overflow: hidden;
}

.main-menu {
  z-index: 6;
  box-shadow: 0px 0 16px rgba(0, 0, 0, 0.1);
}

.main-menu-list {
  position: relative;
}

.main-menu-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 15px;
  color: #fff;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.main-content-header {
  display: flex;
  padding: 0 1.2rem;
  box-shadow: 0 0px 16px rgba(0, 0, 0, 0.1);
  z-index: 5;
}

.main-content-header-main {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.main-header-trigger {
  cursor: pointer;
  font-size: 16px;
  align-items: center;
  margin-right: 30px;
}

.main-content-header-item {
  display: flex;
  align-items: center;
}

.main-content-header-right {
  display: flex;
  align-items: center;
}

.breadcrumbs {
  margin-left: 28px;
  font-size: 14px;
}

.page-content-body {
  padding-top: 1rem;
  padding-bottom: 1.2rem;
}
</style>
